<template>
  <div class="item-wrapper" @click="pick">
    <div>{{title}}</div>
    <div class="item-wrapper-right flex_start">
      <div>
        <p class="avatar-img" v-if="isImg">
          <uploader-hand-pic
                             :headerImage='content'
          ></uploader-hand-pic>
        </p>
        <p class="ellipsis1" v-else>
          <span v-if="!isEmpty">{{content}}</span>
          <span v-else>请填写{{title}}</span>
        </p>
      </div>
      <div class="arrow-img" v-if="title==='姓名' || title==='身份证'"><img v-show="isEmpty" src="/web-hft-ee/static/img/m/me_arrows.png"></div>
      <div class="arrow-img" v-else><img src="/web-hft-ee/static/img/m/me_arrows.png"></div>
    </div>
  </div>
</template>

<script>
  import uploaderHandPic from '@/components/uploaderHandPic'

  export default {
    name: 'myInfoItem',
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      isEmpty: {
        type: Boolean,
        default: false,
      }
    },
    components: {
      uploaderHandPic
    },
    data () {
      return {
        uploaderShow: false,
      }
    },
    computed: {
      isImg () {
        return this.title === '头像'
      }
    },
    methods: {
      receiveCommonComStatus () {
        this.uploaderShow = false
      },
      pick () {
        let data = {
          'title': this.title,
          'content': this.content
        }
        console.log(data)
        this.$emit('itemData', data) //父组件监听的名字必须是formSubmit
      },
    },
  }
</script>

<style scoped>
  .item-wrapper {
    display: flex;
    justify-content: space-between;
    height: 64px;
    line-height: 64px;
    border-bottom: 1px #EEEEEE solid;
    padding: 0px 16px;
    background: white;
  }

  .arrow-img img {
    margin-top: 22px;
    height: 21px;
  }

  .avatar-img {
    margin-top: 6px;
  }

  /*.avatar-img img {*/
  /*  width: 100%;*/
  /*}*/

  .item-wrapper > div:nth-of-type(1) {
    width: 66px;
  }
</style>
